<example name="Dialog">
  <file type="html" disable-auto-size>
    <div class="long-page">

      <div id="dialog"></div>
    </div>
  </file>

  <file type="css">
    :global(.long-page) {
      height: 2000px;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';

    import Dialog from '@jetbrains/ring-ui/components/dialog/dialog';
    import {Header, Content} from '@jetbrains/ring-ui/components/island/island';
    import Button from '@jetbrains/ring-ui/components/button/button';
    import Panel from '@jetbrains/ring-ui/components/panel/panel';

    class DialogDemo extends React.Component {
      state = {
        show: true
      };

      doAction = () => {
        alert('action performed');
        this.setState({show: false});
      }

      cancelDialog = () => {
        this.setState({show: false});
      }

      render() {
        return (
          <div>
            <div>
              <Button onClick={() => this.setState({show: true})}>Show dialog</Button>
            </div>

            <Dialog show={this.state.show} onCloseAttempt={this.cancelDialog}>
              <Header>Dialog title</Header>
              <Content>Dialog content</Content>
              <Panel>
                <Button blue={true} onClick={this.doAction}>OK</Button>
                <Button onClick={this.cancelDialog}>Cancel</Button>
              </Panel>
            </Dialog>

          </div>
        );
      }
    }

    render(<DialogDemo />, document.getElementById('dialog'));
  </file>
</example>

<example name="Dialog with scroll">
  <file type="html" disable-auto-size>
    <div>
      <div id="dialog"></div>
    </div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';

    import Dialog from '@jetbrains/ring-ui/components/dialog/dialog';
    import {Header, Content} from '@jetbrains/ring-ui/components/island/island';
    import Button from '@jetbrains/ring-ui/components/button/button';
    import Panel from '@jetbrains/ring-ui/components/panel/panel';

    class DialogDemo extends React.Component {
      state = {
        show: true
      };

      doAction = () => {
        alert('action performed');
        this.setState({show: false});
      }

      cancelDialog = () => {
        this.setState({show: false});
      }

      render() {
        return (
          <div>
            <div>
              <Button onClick={() => this.setState({show: true})}>Show dialog</Button>
            </div>

            <Dialog show={this.state.show} onCloseAttempt={this.cancelDialog}>
              <Header>Dialog title</Header>
              <Content>
                <div>
                  <p>Dialog content (scrollable)</p>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. Lorem Ipsum has been the industry's standard dummy text ever
                    since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. It has survived not only five
                    centuries, but also the leap into electronic typesetting, remaining
                    essentially unchanged.</p>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. Lorem Ipsum has been the industry's standard dummy text ever
                    since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. It has survived not only five
                    centuries, but also the leap into electronic typesetting, remaining
                    essentially unchanged.</p>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. Lorem Ipsum has been the industry's standard dummy text ever
                    since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. It has survived not only five
                    centuries, but also the leap into electronic typesetting, remaining
                    essentially unchanged.</p>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. Lorem Ipsum has been the industry's standard dummy text ever
                    since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. It has survived not only five
                    centuries, but also the leap into electronic typesetting, remaining
                    essentially unchanged.</p>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. Lorem Ipsum has been the industry's standard dummy text ever
                    since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. It has survived not only five
                    centuries, but also the leap into electronic typesetting, remaining
                    essentially unchanged.</p>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. Lorem Ipsum has been the industry's standard dummy text ever
                    since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. It has survived not only five
                    centuries, but also the leap into electronic typesetting, remaining
                    essentially unchanged.</p>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. Lorem Ipsum has been the industry's standard dummy text ever
                    since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. It has survived not only five
                    centuries, but also the leap into electronic typesetting, remaining
                    essentially unchanged.</p>
                </div>
              </Content>
              <Panel>
                <Button blue={true} onClick={this.doAction}>OK</Button>
                <Button onClick={this.cancelDialog}>Cancel</Button>
              </Panel>
            </Dialog>

          </div>
        );
      }
    }

    render(<DialogDemo />, document.getElementById('dialog'));
  </file>
</example>
